{include file="Public:header" /}
<style type="text/css">
    .select_activity .active{background: #ccc;}
</style>
<div class="bar bar-nav">
    <h1 class="title">预约</h1>
    <i class="icon icon-left" onclick="window.history.go(-1);"></i>
</div>

<nav class="bar bar-tab">
    <a class="tab-item active" href="{:U('Index/index')}">
        <span class="icon icon-home"></span>
        <span class="tab-label">首页</span>
    </a>
    <a class="tab-item" href="#">
        <span class="icon iconfont icon-phone"></span>
        <span class="tab-label">咨询</span>
    </a>
    <a class="tab-item" href="{:U('Apply/expert_join')}">
        <span class="icon iconfont icon-account"></span>
        <span class="tab-label">我要加入</span>
    </a>
</nav>

<div class="content">

    <div class="list-block inset yuyue_button">
        <div class="content-block-title">本周可预约时间</div>
        <ul class="select_activity">
            <li class="item-link list-button active" onclick="selectWeek(1)">星期一</li>
            <li class="item-link list-button" onclick="selectWeek(2)">星期二</li>
            <li class="item-link list-button" onclick="selectWeek(3)">星期三</li>
            <li class="item-link list-button" onclick="selectWeek(4)">星期四</li>
            <li class="item-link list-button" onclick="selectWeek(5)">星期五</li>
            <li class="item-link list-button" onclick="selectWeek(6)">星期六</li>
            <li class="item-link list-button" onclick="selectWeek(0)">星期七</li>
        </ul>
        <div class="text-center">
            <button onclick="yuyue()" class="button button-fill">确定</button>
        </div>
    </div>
</div>


<div class="activity_from_bg" style="display: none;"></div>
<div class="activity_from" style="display: none;">

    <form id="submitForm" onsubmit="return false;">
        <span class="close js-bm"><i class="iconfont icon-add"></i></span>
        <div class="list-block">
            <div class="item-title text-center">填写报名</div>
            <ul>
                <!-- Text inputs -->
                <li style="display: none;">
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-name"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">活动id</div>
                            <div class="item-input">
                                <input type="text" name="activity_id" value='{$activity_id}'>
                            </div>
                        </div>
                    </div>
                </li>
                <li style="display: none;">
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-name"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">时间</div>
                            <div class="item-input">
                                <input type="text" id="selectTime" name="selectTime" value='1'>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-name"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">姓名</div>
                            <div class="item-input">
                                <input type="text" name="username" placeholder="张三">
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-name"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">手机</div>
                            <div class="item-input">
                                <input type="tel" name="phone" placeholder="13456789101">
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-name"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">邮箱</div>
                            <div class="item-input">
                                <input type="text" name="email" placeholder="123456@abc.com">
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="content-block">
            <div class="row">
                <div class="col-50"><span>合计：<font class="button-danger">￥21.00</font></span></div>
                <input name="pay" type="hidden" value="21.00">
                <div class="col-50"><a href="#" id="submitbutton" class="button button-big button-fill button-danger">提交</a></div>
            </div>
        </div>
    </form>
</div>
{include file="Public:footer" /}
<script src="__PUBLIC__/Admin/plugins/layer/layer.js"></script>
<script>
    function selectWeek(id){
        $('#selectTime').val(id);
    }
    
    function yuyue() {
        $(".activity_from").slideToggle();
        $(".activity_from_bg").fadeToggle();
    }
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true
    });

    jQuery(document).ready(function() {
        $(".yuyue_button li").on("click", function() {
            $(this).siblings().removeClass("active");
            $(this).addClass("active");
        });
    });
    
    $('#submitbutton').click(function(){
        $.ajax({
            url:'__ROOT__/Apply/expert_page_yuyue',
            dataType: 'json',
            type:'post',
            data:$('#submitForm').serialize(),
            success:function(data){
                console.log(data);
                if(data.status == 1){
                    layer.msg(data.message,{time:2000},function(){
                        window.location.href="__ROOT__/Apply/expert_page/id/{$activity_id}";
                    });
                    
                }else if(data.status == 2){
                    layer.msg(data.message);
                }
            }
        });
    });
</script>


</html>